JavaScript Primer オブジェクト
https://gyazo.com/51ccf23737c36fe563a7c90cb8c3b2e0
読書メモ
省略記法
code:js
const name = "名前";
// nameというプロパティ名でnameの変数を値に設定したオブジェクト
const obj = {
name
};
console.log(obj); // => { name: "名前" }
code:js
const languages = {
ja: "日本語",
en: "英語"
};
const { ja, en } = languages;
console.log(ja); // => "日本語"
console.log(en); // => "英語"
ブラケットを利用する場合
変数
変数の識別子として扱えない文字列
Symbol
ドット記法→利用可能なプロパティ名歯科利用できない
プロパティの削除 → delete演算子
"use strict";と組み合わせる
プロパティの存在確認
undefinedとの比較
非推奨
プロパティの値がundefinedであった場合に、プロパティそのものが存在するかを区別できない
in演算子
hasOwnPropertyメソッド
オブジェクトのプロパティ名は文字列として扱われる→Symbolを使おう code:js
const obj = {};
// Symbolは例外的に文字列化されず扱える
const symbolKey1 = Symbol("シンボル1");
const symbolKey2 = Symbol("シンボル2");
オブジェクトの列挙
オブジェクトのマージと複製
code:js
const obj = Object.assign(target, ...sources);
code:js
const objectA = { a: "a" };
const objectB = { b: "b" };
const merged = Object.assign({}, objectA, objectB);
console.log(merged); // => { a: "a", b: "b" }
targetは同じ配列のメモリを参照するっぽい
code:js
const objectA = { a: "a" };
const objectB = { b: "b" };
const merged = {
...objectA,
...objectB
};
console.log(merged); // => { a: "a", b: "b" }
オブジェクトの複製
Object.assignメソッドを使う → 浅いコピー
code:js
// 引数のobjを浅く複製したオブジェクトを返す
const shallowClone = (obj) => {
return Object.assign({}, obj);
};
const obj = { a: "a" };
const cloneObj = shallowClone(obj);
console.log(cloneObj); // => { a: "a" }
// オブジェクトを複製しているので、異なるオブジェクトとなる
console.log(obj === cloneObj); // => false
深いコピー → 再帰させる
code:js
// 引数のobjを浅く複製したオブジェクトを返す
const shallowClone = (obj) => {
return Object.assign({}, obj);
};
// 引数のobjを深く複製したオブジェクトを返す
function deepClone(obj) {
const newObj = shallowClone(obj);
// プロパティがオブジェクト型であるなら、再帰的に複製する
Object.keys(newObj)
.filter(k => typeof newObjk === "object") .forEach(k => newObjk = deepClone(newObjk)); return newObj;
}
const obj = {
level: 1,
nest: {
level: 2
}
};
const cloneObj = deepClone(obj);
// nestオブジェクトも再帰的に複製されている
console.log(cloneObj.nest === obj.nest); // => false